<template>
  <v-card class="mx-auto">

    <v-container fluid>
      <v-row dense>
        <v-col cols="12"
               sm="12">
          <div class="attachment-btns">

            <v-btn :class="{'SelectFiles':isActive}"
                   depressed
                   @click="inputFile"><input ref="uploadFile"
                                             multiple
                                             style="display:none"
                                             type="file"
                                             @change="file()">Select files
              <div>

              </div>

            </v-btn>
            <v-btn depressed
                   @click="Updoad">Upload
            </v-btn>
            <v-dialog v-model="dialog"
                      width="48%">
              <template v-slot:activator="{ on, attrs }">
                <v-btn v-bind="attrs"
                       v-on="on"
                       depressed>My photo album
                </v-btn>
              </template>
              <v-card>
                <v-card-title class="headline grey lighten-5">
                  My Photo Album
                </v-card-title>

                <v-card-text>
                  <div class="receipts-selected-group">
                    <div class="receipts-selected">
                      <img alt=""
                           src="../../assets/images/receipts/c321829a-9038-4a18-8b40-94a71cacd829.jpg">
                      <div class="check-image">
                        <v-checkbox v-model="checkbox"></v-checkbox>
                        <p>c321829a-9038-4a18-8b40-94a71cacd829.jpg</p>
                      </div>
                    </div>
                    <div class="receipts-selected">
                      <img alt=""
                           src="../../assets/images/receipts/e5e0a877-ff46-448e-a589-4ef5a7ec862e.png">
                      <div class="check-image">
                        <v-checkbox v-model="checkbox"></v-checkbox>
                        <p>2.png</p>
                      </div>
                    </div>
                  </div>
                </v-card-text>
                <div class="btn-pagination">
                  <v-btn color="primary"
                         text
                         @click="dialog = false">
                    Selected all
                  </v-btn>
                  <v-pagination v-model="page"
                                :length="3"></v-pagination>
                </div>
                <v-divider></v-divider>

                <v-card-actions>
                  <v-spacer></v-spacer>
                  <v-btn color="primary"
                         text
                         @click="dialog = false">
                    Attach
                  </v-btn>
                  <v-btn color="primary"
                         text
                         @click="dialog = false">
                    Delete
                  </v-btn>
                  <v-btn :class="{'image-close-btn':isActive}"
                         color="primary"
                         text
                         @click="dialog = false">
                    Close
                  </v-btn>
                </v-card-actions>
              </v-card>
            </v-dialog>
            <v-dialog v-model="selectFileDialog"
                      width="48%">
              <v-card>
                <v-card-title class="headline grey lighten-5">
                  Select file type
                </v-card-title>
                <v-card-text>

                </v-card-text>

              </v-card>
            </v-dialog>
          </div>

        </v-col>
        <div>
          <v-chip v-for="attachment in attachmentList"
                  :key="attachment.uploadFileID"
                  class="ma-2"
                  close
                  color="red"
                  text-color="white"
                  @click:close="deleteFile(attachment)">
            {{ attachment.fileName }}
          </v-chip>

        </div>
      </v-row>
      <v-row>
        <v-dialog v-model="UploadDialog"
                  max-width="290"
                  persistent>
          <v-card-actions>
            <v-radio-group v-model="attachmentType"
                           column>
              <v-radio label="Hotel Receipt"
                       value="HotelReceipt"></v-radio>
              <v-radio label="Tickets or Boarding Pass"
                       value="Tickets"></v-radio>
              <v-textarea v-if="attachmentType == 'Tickets'"
                          v-model="TicketsRemarks"
                          name="input-7-4"
                          outlined></v-textarea>
            </v-radio-group>
          </v-card-actions>
          <v-card>
            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn color="green darken-1"
                     text
                     @click="SelectAttachmentType()">
                Select
              </v-btn>
              <v-btn color="green darken-1"
                     text
                     @click="CloseAttachmentType">
                Closed
              </v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
      <v-row>
        <v-col cols="12"
               md="12"
               sm="12">
          <h3 style="float: left;">Hotel Receipt</h3>
        </v-col>
        <v-col v-for="fileItem in hotelList"
               :key="fileItem.uploadFileID"
               cols="12"
               md="1">
          <v-card class="mx-auto"
                  max-width="344">
            <v-card-text>
              <viewer :images="hotelList">
                <img :src="'data:image/jpeg;base64,'+fileItem.fileByte"
                     style="width:100px;height: 79px;">
                <p>{{ fileItem.fileName }}</p>

              </viewer>
            </v-card-text>
            <v-card-actions>
              <v-btn :class="{'delete-btn':isActive}"
                     depressed
                     @click="deleteFileOnDb(fileItem)"></v-btn>
            </v-card-actions>
          </v-card>
        </v-col>
        <v-col cols="12"
               md="12"
               sm="12">
          <h3 style="float: left;">Tickets or Boarding Pass</h3>
        </v-col>
        <v-col v-for="fileItem in ticketsList"
               :key="fileItem.uploadFileID"
               cols="12"
               md="1">
          <v-card class="mx-auto"
                  max-width="344">
            <v-card-text>
              <viewer :images="ticketsList">
                <img :src="'data:image/jpeg;base64,'+fileItem.fileByte"
                     style="width:100px;height: 79px;">
                <p>{{ fileItem.fileName }}</p>

              </viewer>
            </v-card-text>
            <v-card-actions>
              <v-btn :class="{'delete-btn':isActive}"
                     depressed
                     @click="deleteFileOnDb(fileItem)"></v-btn>
            </v-card-actions>
          </v-card>
        </v-col>
        <v-col cols="12"
               md="12">
          <h3 style="float: left;">Remarks</h3>
        </v-col>
        <v-col cols="12"
               md="12"
               style="padding: 0px 12px 12px 12px;">
          <span style="float: left;">{{ travelallowance.remarks }}</span>

        </v-col>
      </v-row>
    </v-container>
  </v-card>
</template>

<script lang="ts">
import {Component, Prop, Vue} from "vue-property-decorator";
import {
  DeleteUploadFile,
  DeleteUploadFileODB,
  GetUploadFile,
  PutTravelAllowance,
  SaveUploadFile,
  UploadFile
} from "@/request/index";
import {travelallowanceDetail} from "@/pagetypes";
import {isEmpty} from "@/utils/util"

@Component({
  components: {},
})
export default class APP extends Vue {
  attachmentList: [] = [];
  hotelList: [] = [];
  ticketsList: [] = [];
  UploadDialog: boolean = false;
  attachmentType: string = "";
  dateMenu: boolean = false;
  isActive: boolean = true;
  selectFileDialog: boolean = false;
  page: number = 1;
  dialog: boolean = false;
  checkbox: boolean = true;
  TicketsRemarks: string = "";
  @Prop({type: Object, default: {}}) travelallowance !: travelallowanceDetail;

  get TravelallowanceDetail() {
    return this.travelallowance;
  }

  set TravelallowanceDetail(item: travelallowanceDetail) {
    this.$emit("update:travelAllowance", item)
  }

  mounted() {
  }

  CloseAttachmentType() {
  }

  deleteFileOnDb(item: any) {
    //删除操作
    DeleteUploadFileODB(item.uploadFileID)
      .then((res: any) => {
        if (res.data) this.$message.success("delete success");
        GetUploadFile(this.$route.params.id).then((r: any) => {
          if (r.data) {
            this.fileFiltrate(r.data)
          }
        })
      })
      .catch((err: any) => {
      });
  }

  deleteFile(item: any) {
    console.log(item)
    DeleteUploadFile(item.travelAllowanceId)
      .then((res: any) => {
        if (res.data) this.$message.success("delete success");
        this.attachmentList.splice(this.attachmentList.indexOf(item), 1);

      })
      .catch((err: any) => {
      });
  }

  SelectAttachmentType() {
    this.attachmentList.forEach((x: any) => {
      x.UploadType = this.attachmentType;
    });
    if (this.attachmentType == "Tickets") {
      if (this.TicketsRemarks == "") {
        return this.$message.error("请填写Remarks");
      }
    }
    SaveUploadFile(this.attachmentList).then((res: any) => {
      this.attachmentList = [];
      GetUploadFile(this.$route.params.id).then((r: any) => {
        if (r.data) {
          this.fileFiltrate(r.data)
        }
      })
    });

    if (!isEmpty(this.TravelallowanceDetail))
      this.TravelallowanceDetail.remarks += this.TicketsRemarks;
    else
      this.TravelallowanceDetail.remarks = this.TicketsRemarks;
    PutTravelAllowance(this.TravelallowanceDetail)
    this.UploadDialog = false;
    this.TicketsRemarks = "";
    this.attachmentType = "";
  }

  Updoad() {
    if (this.attachmentType == "") {
      this.UploadDialog = true;
    }
  }

  inputFile() {
    this.$refs.uploadFile.dispatchEvent(new MouseEvent("click"));
  }

  file() {
    const file = this.$refs.uploadFile.files;
    const data = new FormData();
    data.append("id", this.$route.params.id);
    if (file.length > 0) {
      file.forEach((x: any) => {
        data.append("file", x);
      });
    }

    UploadFile(data).then((res: any) => {
      if (res.data) {
        this.attachmentList = res.data;
        console.log(res.data)
      }
    });
  }

  fileFiltrate(list: any) {
    this.ticketsList = list.filter(
      (z: any) => z.uploadType == "Tickets"
    );
    this.hotelList = list.filter(
      (z: any) => z.uploadType == "HotelReceipt"
    );
  }

}
</script>
